<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./lib/axios.js"></script>
    <script src="./lib/vue.js"></script>
    <script src="./lib/elementui.js"></script>
    <link rel="stylesheet" href="./lib/elementui.css">
    <title>Document</title>
</head>

<body>
    <!-- vue指令 -->
    <!-- v-model:数据双向绑定  被v-model标记的就成为vue里面双向绑定的一个变量 -->
    <!-- v-bind:数据绑定(数据单向绑定) ,被v-bind标记的就成为vue里面单向绑定的一个变量-->
    <!-- v-on 事件 ，被v-on标记的就成为vue里面的一个方法函数-->
    <div id="loginPage">
        <h3>用户登录</h3>
        <p>
            <el-input placeholder="请输入登录账号" v-model="userNo">
                <template slot="prepend">账号</template>
              </el-input>
        </p>
        <p>
            <el-input placeholder="请输入登录密码" v-model="password" show-password>
                <template slot="prepend">密码</template>
              </el-input>
        </p>
        <p>
            <el-checkbox v-model="remMe">记住用户名和密码</el-checkbox>
        </p>
        <p>
            <el-button type="primary" v-on:click="login">登录</el-button>
            <el-button type="info">返回</el-button>
        </p>
    </div>
</body>

<script>
    // // 委托：就是用一个变量接受一个函数(方法)
    // function func(){
    //     console.log("hello AEC");
    // }
    // var funcvalue = func;
    // funcvalue();

    new Vue({
        // 此处是写入渲染的作用域
        el:"#loginPage",

        // 下面是数据绑定
        data:{
            userNo:"2589111",
            password:"22333",
            remMe:true
        },
        methods:{
            login:function(){
                var userNo = this.userNo;
                var password = this.password;
                var remMe = this.remMe;

                // 前后端进行数据交互使用axios.js
                // axios.get("http://localhost:5000/api/Login/GetLogin?userno=2589111&password=222333").then(function(res){})
                axios.get("http://localhost:5000/api/Login/GetLogin/"+userNo+"/"+password).then(function(res){
                    console.log(res);
                })
            }
        }
        // mounted(){
        //     var ue = UE.getEditor('count',{
        //         initialFrameWidth:'100%',
        //     })
        // }
    })
</script>

<style>
    *{
        margin:0;
        padding:0;
    }
    #loginPage{
        width: 586px;
        height: 300px;
        box-shadow:0 0 10px #666;
        margin:auto;
        margin-top: 10%;
    }
    #loginPage h3{
        text-align:center;
        padding: 16px 0;
    }
    #loginPage p{
        width: 80%;
        margin: auto;
        margin-bottom: 20px;
    }
    #loginPage p:last-child{
        text-align: center;
    }
    #loginPage p button{
        width: 48%;
    }
</style>
</html>